<template>
    <div>
        <top-bar></top-bar>
        <div
            class="waterfall-content"
            :class="{ 'footer-download': this.footer.isDownload, 'footer-default': this.footer.isDefault, 'footer-detail': this.footer.isDetail  }">
            <card
                v-for="(item, index) in items"
                :key="item.id"
                class="waterfall-item"
                :id="item.id"
                :title="item.title"
                :date="item.date"
                type="waterfall-check"
                :bg="item.image"
                @click.native="changeSelected($event)"></card>
            <div style="clear: both;"></div>
        </div>
        <mfooter
            title="完善个人资料，下载原版无水印照片"
            :type="this.footer.type"
            :download="this.download"
            :chooseCount="this.chooseCount"></mfooter>

    </div>
</template>

<script>
    import TopBar from '@/components/TopBar'
    import Waterfall from 'vue-waterfall/lib/waterfall'
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
    import Card from '@/components/Card'
    import Mfooter from '@/components/Mfooter'
    import {Util} from '@/js/Util'
    import {AlertModule} from 'vux'
    import {Config} from '@/js/Config'
    export default {
        components: {
            Waterfall,
            WaterfallSlot,
            TopBar,
            Card,
            Mfooter,
            AlertModule
        },
        mounted() {
            // 微信登录
            this.loginWechat(Util.getUrlParam('code'));
            Util.setFooterClass(this);
        },
        data() {
            return {
                chooseCount: 0,
                selectedIds: [],
                waterfall: {
                    screenWidth: window.screen.width * 0.48,
                    itemWidth: window.screen.width * 0.48 * 0.9
                },
                footer: {
                    type: 'download',
                    isDefault: false,
                    isDetail: false,
                    isDownload: false
                },
                items: [],
                download: {
                    query: [],
                    action: 'photo'
                }
            }
        },
        methods: {
            // 授权登录
            loginWechat(code) {
                let _self = this;
                // 判断是否有账号信息
                if (!sessionStorage.getItem('MeiJingKu_openid')) {
                    if (!code) {
                        location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                                Config._appid + '&redirect_uri=' + encodeURIComponent(location.protocol + '//' + location.hostname + '/web/#/MeiJingSuiPai/photo/download?id=' + this.$route.query.id) + '&respon' +
                                'se_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
                    }
                } else {
                    this.getList();
                    return false;
                }
                this
                    .$vux
                    .loading
                    .show({text: 'Loading'});
                // 测试接口 this.$http.post('user/LoginByOpenid/v1?openid=1').then(response => {
                this
                    .$http
                    .post('user/LoginByCode/v1?code=' + code)
                    .then(response => {
                        this
                            .$vux
                            .loading
                            .hide();
                        let result = response.data;
                        if (!result.code) {
                            sessionStorage.setItem('MeiJingKu_openid', result.data.openid);
                        } else {
                            location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                                            Config._appid + '&redirect_uri=' + encodeURIComponent(location.protocol + '//' + location.hostname + '/web/#/MeiJingSuiPai/photo/download?id=' + _self.$route.query.id) + '&respon' +
                                            'se_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
                        }
                        this.getList();
                    }, response => {
                        Util.errorWarning(this);
                    });
            },
            changeSelected(event) {
                // get selected elements number
                let self = event.currentTarget;
                if (!self.getAttribute('isSelected')) {
                    // add selected number
                    this.chooseCount++;
                    this
                        .download
                        .query
                        .push(self.getAttribute('data-id'));
                    // console.table(this.selectedIds);
                } else {
                    this.chooseCount--;
                    // remove selected id
                    let index = this
                        .download
                        .query
                        .indexOf(self.getAttribute('data-id'));
                    if (index > -1) {
                        this
                            .download
                            .query
                            .splice(index, 1);
                    }
                    // console.table(this.selectedIds);
                }
            },
            getList() {
                // 获取列表
                this
                    .$vux
                    .loading
                    .show({text: 'Loading'});
                let openid = sessionStorage.getItem('MeiJingKu_openid'),
                    id = this.$route.query.id,
                    _self = this;;
                this
                    .$http
                    .get(
                        'team/TeamPicture/v1?teamId=' + this.$route.query.id + '&openid=' + openid
                    )
                    .then(response => {
                        let result = response.data;
                        // 验证失败
                        if (result.code) {
                            this
                                .$vux
                                .toast
                                .text(result.data, 'bottom');
                            return false;
                        }
                        console.log(result);
                        sessionStorage.setItem('MeiJingKu_auth', result.data.auth);
                        // 此处遍历生成图片
                        for (let i in result.data.pictures) {
                            let item = {
                                id: result
                                    .data
                                    .pictures[i]
                                    .id,
                                title: result
                                    .data
                                    .pictures[i]
                                    .name,
                                image: result
                                    .data
                                    .pictures[i]
                                    .link,
                                date: result
                                    .data
                                    .pictures[i]
                                    .time,
                                height: '',
                                width: '',
                                thumbHeight: ''
                            };
                            this
                                .items
                                .push(item);
                        }
                        for (let i = 0; i < _self.items.length; i++) {
                            let image = new Image();
                            image.src = _self
                                .items[i]
                                .image;
                            image.onload = function () {
                                _self
                                    .items[i]
                                    .height = this.height;
                                _self
                                    .items[i]
                                    .width = this.width;
                                _self
                                    .items[i]
                                    .thumbHeight = _self
                                    .items[i]
                                    .height / (_self.items[i].width / _self.waterfall.itemWidth);
                            }
                        }
                        this
                            .$vux
                            .loading
                            .hide();
                    }, response => {
                        Util.errorWarning(this);
                    });
            }
        }
    }
</script>

<style lang="less">
    .waterfall-content {
        margin-top: 5rem;
    }

    .footer-default,
    .footer-detail {
        margin-bottom: 12rem !important;
    }

    .footer-download {
        margin-bottom: 15rem !important;
    }
</style>